<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-row>
        <el-col :span="12">
          <el-form
            ref="form"
            :model="user"
            :rules="userRules"
            label-width="80px"
          >
            <el-form-item label="编号" prop="id"> {{ user.id }} </el-form-item>
            <el-form-item label="手机" prop="mobile">
              {{ user.mobile }}
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>

            <el-form-item label="介绍" prop="intro">
              <el-input type="textarea" v-model="user.intro"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="submitLoading" @click="onSubmit">修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="12">
          <div class="avatar-container" >
            <label class="avatar-container" for="file" >
              <el-avatar
                shape="square"
                :size="150"
                fit="cover"
                :src="user.photo"
              ></el-avatar>
              <p>点击修改头像</p>
            </label>
            <input
              id="file"
              ref="file"
              type="file"
              @change="onFileChange"
              hidden
            />
          </div>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import { getUserInfo, saveUserPhoto, updateUserInfo } from '@/api/user'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import globalBus from '@/utils/global-bus'

import 'echarts/dist/extension/bmap'

export default {
  name: 'SettingIndex',
  data () {
    return {
      avatarUrl: 'http://toutiao-img.itheima.net/FuRx59cirYEj0GpenoxIKJqEUW19',
      user: {
        email: '',
        id: 1,
        intro: '',
        mobile: '',
        name: '',
        photo: ''
      },
      userRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      },
      dialogVisible: false,
      previewImg: '',
      cropper: null,
      uploadAvatarLoading: false,
      submitLoading: false

    }
  },
  props: {},
  components: {},
  mounted () {},
  created () {
    this.loadUserInfo()
  },
  methods: {
    onSubmit () {
      this.submitLoading = true
      this.$refs.form.validate(value => {
        if (value) {
          updateUserInfo(this.user).then(res => {
            this.$message({
              message: '用户信息更新成功',
              type: 'success'
            })
            globalBus.$emit('update-user', this.user)
            this.submitLoading = false
          }).catch(e => {
            this.submitLoading = false
          })
        }
      })
    },
    loadUserInfo () {
      getUserInfo().then((res) => {
        this.user = res.data.data
      })
    },
    onFileChange () {
      const file = this.$refs.file
      const blobData = window.URL.createObjectURL(file.files[0])
      this.previewImg = blobData
      this.dialogVisible = true
      this.$refs.file.value = ''
    },
    handleClose (e) {},
    onDialogOpen () {
      const image = this.$refs['preview-img']

      // 预览图片发生变化更新裁切器
      if (this.cropper) {
        this.cropper.replace(this.previewImg)
        return
      }
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        dragMode: 'none',
        // cropBoxMovable: false,
        // cropBoxResizable: false,
        background: false,
        movable: true,
        crop (event) {
        }
      })
    },
    onDialogClosed () {
      // this.cropper.destroy()
    },
    // 提示框的确定按钮
    onUpdateAvatar () {
      this.uploadAvatarLoading = true
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData()
        formData.append('photo', blob)

        saveUserPhoto(formData).then(res => {
          this.user.photo = res.data.data.photo
          this.uploadAvatarLoading = false
          this.$message({
            message: '更新头像成功',
            type: 'success'
          })
          globalBus.$emit('update-user', this.user)
        }).catch(e => {
          this.uploadAvatarLoading = false
        })
      })
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.preview-image-wrap {
  .preview-image {
    display: block;
    max-width: 100%;
    height: 200px;
  }
}
</style>
